<template>
  <div class="per-content">
      <div class="cont-main" v-for="(item, idx) in list" :key="idx">
        <ul class="box">
          <li>{{page.total}}</li>
          <li>{{item.username}}</li>
          <li>
            <img src="https://img2.baidu.com/it/u=172743432,3634829947&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501" alt="">
          </li>
          <li>{{item.workNumber}}</li>
          <li>{{item.formOfEmployment}}</li>
          <li>{{item.departmentName}}</li>
          <li>{{item.timeOfEntry}}</li>
          <li>{{item.enableState}}</li>
          <ol class="box-small">
            <li>查看</li>
            <li>转正</li>
            <li>调岗</li>
            <li>离职</li>
            <li>角色</li>
            <li>删除</li>
          </ol>
        </ul>
      </div>
      <el-pagination 
        background 
        :current-page="page.page"
        layout="prev, pager, next" 
        :total="page.total"
        @current-change="changePage" 
        :page-size="page.size">
      </el-pagination>
  </div>
</template>
<script>

export default {
  name: 'perContent',
  components: {
  },
  data() {
    return {
      list: [],
      page: {
        page: 1,
        size: 10,
        total: 0,
      }
    }
  },
  created(i) {
    this.getUsers()
  },
  methods: {
    async getUsers() {
      const { total, rows } = await getUsers(this.page)
      this.page.total = total
      this.list = rows
      console.log(this.list)
    },
    changePage(newPage,i) {
      this.page.page = newPage // 赋值最新页码
      this.getUsers() // 重新拉取数据
    }
  }
}

</script>
<style>
*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
.cont-main{
  width: 100%;
  margin-left: 20px;
}
.cont-main .box{
  width: 100%;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.cont-main .box>li{
  color: #999;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
}
.box li{
  padding: 5px;
}
.box>li:nth-child(0){
  width: 100px;
}
.box>li:nth-child(1){
  width: 100px;
}
.box>li:nth-child(2){
  width: 100px;
}
.box>li:nth-child(3){
  width: 100px;
}
.box>li:nth-child(4){
  width: 100px;
}
.box>li:nth-child(5){
  width: 100px;
}
.box>li:nth-child(6){
  width: 100px;
}
.box>li:nth-child(7){
  flex: 1;
}
.box>li:nth-child(8){
  width: 100px;
}
.box img{
  width: 50px;
  height: 50px;
}
.box-small{
  width: 220px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box-small li{
  font-size: 12px;
  color: blue;
  cursor: pointer;
}
</style>